<#import "/spring.ftl" as spring />

<#include "/tags/userNotification.ftl">
<#include "/tags/famousQuote.ftl">
<#include "/tags/userCompleteness.ftl">
<#include "/tags/userIntroTag.ftl">
<#include "/tags/friendList.ftl">
<#include "/tags/friendHintTag.ftl">
<#include "/tags/goalCloudTag.ftl">
<#include "/tags/updatedSinceTag.ftl">
<#include "/tags/topGoalsTag.ftl">
<#include "/tags/commonGoalsTag.ftl">
<#include "/tags/confirmBox.ftl">
<#include "/tags/activitiesTag.ftl">
<#include "/tags/mustDoGoalWidget.ftl">
<head>	     	
	<link rel="stylesheet" type="text/css" href="${rc.contextPath}/styles/style_dev.css">
	<link rel="stylesheet" type="text/css" href="${rc.contextPath}/styles/igoal-calendar/jquery-ui-1.8.6.igoal-calendar.css">
	<link type="text/css" rel="stylesheet" href="${rc.contextPath}/styles/tools/jquery.autocomplete.css">	
	
	<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.ui.mouse.min.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.ui.position.min.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.ui.widget.min.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.ui.calendar.min.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.autocomplete.js"></script>
	
	<script type="text/javascript" src="${rc.contextPath}/scripts/cleditor/jquery.cleditor.min.js"></script>
	<link rel="stylesheet" type="text/css" href="${rc.contextPath}/scripts/cleditor/jquery.cleditor.css">
	     
	<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.custom.select.js"></script>
	
	<script type="text/javascript" src="${rc.contextPath}/scripts/page.userDashboard.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/scripts/page.addSMARTGoal.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/scripts/common.goalUtils.js"></script>	
	<script type="text/javascript" src="${rc.contextPath}/scripts/widget.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/dwr/interface/GoalEntryManager.js"></script>
	<script type="text/javascript">
		var updateSMARTGoal = ${data.phases?size};
		jQuery(document).ready(function(){			
			if(updateSMARTGoal){
				jQuery("input#newGoalTitle").unbind('keyDown').keydown(function(e){		
					if(e.keycode == 13 || e.which == 13){
						return false;
					}
				});
				jQuery("input[type=button]#add_goal").unbind('click').click(function(){
					return false;
				});
			}
		});
		
	</script>
	<title>S.M.A.R.T Goal</title>
</head>

<div style="display:none;">
	<div id="sliderPopup" class="userSlider">
		<h1>Bạn đã hoàn thành được bao nhiêu % mục tiêu này?</h1>
		<p>Việc cập nhật số % hoàn thành của một mục tiêu giúp bạn kiểm soát được quá trình thực hiện mục tiêu của mình, hãy cập nhật nó ít nhất 1 tuần 1 lần.</p>
		<div class="slider">
			<div id="slider" rel="#sliderValue a"></div>
			<div id="sliderValue">
				<a>0%</a>
			</div>
			<div class="w4"></div>
			<div id="closeSlider">
				<a href="#" class="icon_1 btnUploadAvatar" style="margin-left:200px">Cập nhật</a>
			</div>
		</div>
	</div>
</div>

<@userNotification />  
<div class="w3"></div>

<div id="infomation">           
	<#if data.mustDoGoal??>
    	<@mustDoGoalWidget data.mustDoGoal.id data.mustDoGoal.title data.mustDoGoal.userCount/>
    </#if>
	<div id="left">
		<div class="dashboardTab">
        	<ul>
            	<li>
                	<a href="${rc.contextPath}/dashboard.html" title="Chia sẻ mục tiêu của bạn!" class="d2Goal selected">MỤC TIÊU</a>
                </li>
                <li>
                	<a href="${rc.contextPath}/wall.html" title="Kết nối bạn bè!" class="d2Wall">TƯỜNG NHÀ</a>
                </li>
                <li>
                	<a href="${rc.contextPath}/news" title="Những bài viết hay!" class="d2News">CHIA SẺ</a>
                </li>
            </ul>
        </div>
        <div class="clearthis"></div>
        <div class="dashboardBlueBox">
        	<div class="dbTitle">
            	<b><@spring.message "page.dashboard.whatIsYourGoal" /></b><label>VUI LÒNG SỬ DỤNG TIẾNG VIỆT CÓ DẤU.</label>
            </div>
            <form name="data" action="${rc.contextPath}/addNewSMARTGoal.html" method="POST">
            <div class="dbAddGoal">
            	<span class="addGoalForm bgPos">
            		<#if (data.phases?size > 0)>
            		<@spring.formInput path="data.newGoalTitle" attributes="autocomplete='off' class='ac_input ignore_me' rel='deny' readonly='readonly' maxlength='255'"/>
            		<#else>
            		<@spring.formInput path="data.newGoalTitle" attributes="autocomplete='off' class='ac_input ignore_me' rel='${data.settings.allowAddGoal?string(\'allow\',\'deny\')}' maxlength='255'"/>
            		</#if>
            	</span>
                <a id="add_goal" class="ignore_me" title="Thêm mục tiêu vào danh sách." href="#"></a>
            </div>
            </form>
            <p class="goalExample">Ví dụ: <a href="#">học guitar</a>, <a href="#">học giỏi tiếng anh</a>, <a href="#">du học</a>...</p>
        </div>
      	<div class="clear"></div>
      	<div id="addGoalResult"></div>
      	<div class="contentHeader">
        	<span class="icon_1 iconYSD"></span><h1>THÔNG TIN VỀ MỤC TIÊU CỦA BẠN</h1>
            <span class="fr"><a href="javascript:createGoal('${data.userGoal.title}')">Bỏ qua bước này</a> | <a href="${rc.contextPath}/dashboard.html">&laquo; Quay lại</a></span>
         </div>   
      	<div class="smartGoalContainer">
      		<@spring.bind "data" />
      		<form name="smart" action="${rc.contextPath}/addSMARTGoal.html" method="POST">
      		<@spring.formHiddenInput path="data.userGoal.title" attributes="rel='userGoalTitle'"/>
      		<@spring.formHiddenInput path="data.userGoal.goalId" attributes="rel='userGoalId'"/>
            <ul>
            	<li>
                	<label class="inputLabelGrey">Kết quả bạn mong muốn là gì?</label>
                    <@spring.formInput path="data.userGoal.value" attributes="class='inputStyle userGoalValue' style='width: 430px' maxlength='255'"/>
                    <div class="clearthis"></div>
                    <p class="valueError" style="color: red; display: none;"></p>
                    <p class="exampleText"><b>Ví dụ:</b> bạn có mục tiêu "giảm cân" bạn nên xác định cụ thể là giảm <b>bao nhiêu kg?</b></p>
                </li>
                <li>
                	<label class="inputLabelGrey">Thời gian hoàn thành:</label>
                	<@spring.formInput path="data.userGoal.deadLine" attributes="class='inputStyle datePickerInput deadLine' style='width: 170px' rel='#showDatePicker0'"/>
                	<a href="#" id="showDatePicker0" class="datePicker" rel="userGoal.deadLine"></a>
                	<p class="deadLineError" style="color: red; display: none;"></p>
                </li>
            </ul>
            <div class="clearthis"></div>
            <div class="contentHeader" style="margin:20px 0px">
        		<span class="icon_1 iconYSD"></span><h1>KẾ HOẠCH THỰC HIỆN</h1>
       		</div> 
            <div class="messageBox infoMessage">
            	<!--  Change class successMessage to failMessage or infoMessage--->
                <span class="icon_1"></span>
                <div class="messageText">
                    <h1 style="font-size:14px">Lời khuyên từ iGoal.</h1>
                    <p style="font-size:11px;padding-left:0px">Bạn nên thực hiện mục tiêu của bạn bằng cách chia nhỏ các công việc ra để dễ kiểm soát mục tiêu cũng như thời gian đạt được nó, công cụ phía dưới đây giúp bạn thực hiện điều này.</p>
                </div>
            </div> 
            
            <ul class="smartGoaUl">
	          	<li class="selectStage">
                	<label class="inputLabelGrey">Khối lượng công việc:</label>
					<p style="margin-bottom:10px;color:#666">Hiện tại iGoal chỉ cho phép số công việc tối đa là <b>9</b></p>
                    <div class="clearthis"></div>
                    <ol class="numberOfStage">
                        <select class="stageNumber" name="phaseCount">
                            <option value="1">1 công việc</option>
                            <option value="2" selected="selected">2 công việc</option>
                            <option value="3">3 công việc</option>
                            <option value="4">4 công việc</option>
                            <option value="5">5 công việc</option>
                            <option value="6">6 công việc</option>
                            <option value="7">7 công việc</option>
                            <option value="8">8 công việc</option>
                            <option value="9">9 công việc</option>                           
                         </select>
                     </ol>                                              
                </li>
                <li id="taskList">
                	<label class="inputLabelGrey">Điền thông tin công việc phải làm:</label>
                    <p style="margin-bottom:10px;color:#666">Hãy điền thông tin công việc tương ứng cho từng giai đoạn và số % mà công việc đó chiếm trong tổng 100% của mục tiêu</p>
                    <ol class="listTaskGoal" rel="1">
                    	<label class="fl index">01</label>
                        <@spring.formInput path="data.phase1.phaseName" attributes="class='inputStyle taskName' maxlength='255'"/>
                        <@spring.formInput path="data.phase1.percentMeasure" attributes="class='inputStyle taskPercent' rel='numeric' maxlength='3'"/>
                        <@spring.formInput path="data.phase1.deadLine" attributes="class='inputStyle taskDeadline datePickerInput' rel='#showDatePicker1'"/>
                        <@spring.formHiddenInput path="data.phase1.index"/>
                        <@spring.formHiddenInput path="data.phase1.id"/>
                        <a href="#" id="showDatePicker1" class="datePicker fl"></a>
                    </ol>
                    <ol class="taskError" rel="1" style="display: none">
                    	<p style="color: red;"></p>
                    </ol>
                    <ol class="listTaskGoal" rel="2">
                    	<label class="fl index">02</label>
                        <@spring.formInput path="data.phase2.phaseName" attributes="class='inputStyle taskName' maxlength='255'"/>
                        <@spring.formInput path="data.phase2.percentMeasure" attributes="class='inputStyle taskPercent' rel='numeric' maxlength='3'"/>
                        <@spring.formInput path="data.phase2.deadLine" attributes="class='inputStyle taskDeadline datePickerInput' rel='#showDatePicker2'"/>
                        <@spring.formHiddenInput path="data.phase2.index"/>
                        <@spring.formHiddenInput path="data.phase2.id"/>
                        <a href="#" id="showDatePicker2" class="datePicker fl"></a>
                    </ol>
                    <ol class="taskError" rel="2" style="display: none">
                    	<p style="color: red;"></p>
                    </ol>
                    <ol class="listTaskGoal" rel="3" style="display: none;">
                    	<label class="fl index">03</label>
                        <@spring.formInput path="data.phase3.phaseName" attributes="class='inputStyle taskName' maxlength='255'"/>
                        <@spring.formInput path="data.phase3.percentMeasure" attributes="class='inputStyle taskPercent' rel='numeric' maxlength='3'"/>
                        <@spring.formInput path="data.phase3.deadLine" attributes="class='inputStyle taskDeadline datePickerInput' rel='#showDatePicker3'"/>
                        <@spring.formHiddenInput path="data.phase3.index"/>
                        <@spring.formHiddenInput path="data.phase3.id"/>
                        <a href="#" id="showDatePicker3" class="datePicker fl"></a>
                    </ol>
                    <ol class="taskError" rel="3" style="display: none">
                    	<p style="color: red;"></p>
                    </ol>
                    <ol class="listTaskGoal" rel="4" style="display: none;">
                    	<label class="fl index">04</label>
                        <@spring.formInput path="data.phase4.phaseName" attributes="class='inputStyle taskName' maxlength='255'"/>
                        <@spring.formInput path="data.phase4.percentMeasure" attributes="class='inputStyle taskPercent' rel='numeric' maxlength='3'"/>
                        <@spring.formInput path="data.phase4.deadLine" attributes="class='inputStyle taskDeadline datePickerInput' rel='#showDatePicker4'"/>
                        <@spring.formHiddenInput path="data.phase4.index"/>
                        <@spring.formHiddenInput path="data.phase4.id"/>
                        <a href="#" id="showDatePicker4" class="datePicker fl"></a>
                    </ol>
                    <ol class="taskError" rel="4" style="display: none">
                    	<p style="color: red;"></p>
                    </ol>
                    <ol class="listTaskGoal" rel="5" style="display: none;">
                    	<label class="fl index">05</label>
                        <@spring.formInput path="data.phase5.phaseName" attributes="class='inputStyle taskName' maxlength='255'"/>
                        <@spring.formInput path="data.phase5.percentMeasure" attributes="class='inputStyle taskPercent' rel='numeric' maxlength='3'"/>
                        <@spring.formInput path="data.phase5.deadLine" attributes="class='inputStyle taskDeadline datePickerInput' rel='#showDatePicker5'"/>
                        <@spring.formHiddenInput path="data.phase5.index"/>
                        <@spring.formHiddenInput path="data.phase5.id"/>
                        <a href="#" id="showDatePicker5" class="datePicker fl"></a>
                    </ol>
                    <ol class="taskError" rel="5" style="display: none">
                    	<p style="color: red;"></p>
                    </ol>
                    <ol class="listTaskGoal" rel="6" style="display: none;">
                    	<label class="fl index">06</label>
                        <@spring.formInput path="data.phase6.phaseName" attributes="class='inputStyle taskName' maxlength='255'"/>
                        <@spring.formInput path="data.phase6.percentMeasure" attributes="class='inputStyle taskPercent' rel='numeric' maxlength='3'"/>
                        <@spring.formInput path="data.phase6.deadLine" attributes="class='inputStyle taskDeadline datePickerInput' rel='#showDatePicker6'"/>
                        <@spring.formHiddenInput path="data.phase6.index"/>
                        <@spring.formHiddenInput path="data.phase6.id"/>
                        <a href="#" id="showDatePicker6" class="datePicker fl"></a>
                    </ol>
                    <ol class="taskError" rel="6" style="display: none">
                    	<p style="color: red;"></p>
                    </ol>
                    <ol class="listTaskGoal" rel="7" style="display: none;">
                    	<label class="fl index">07</label>
                        <@spring.formInput path="data.phase7.phaseName" attributes="class='inputStyle taskName' maxlength='255'"/>
                        <@spring.formInput path="data.phase7.percentMeasure" attributes="class='inputStyle taskPercent' rel='numeric' maxlength='3'"/>
                        <@spring.formInput path="data.phase7.deadLine" attributes="class='inputStyle taskDeadline datePickerInput' rel='#showDatePicker7'"/>
                        <@spring.formHiddenInput path="data.phase7.index"/>
                        <@spring.formHiddenInput path="data.phase7.id"/>
                        <a href="#" id="showDatePicker7" class="datePicker fl"></a>
                    </ol>
                    <ol class="taskError" rel="7" style="display: none">
                    	<p style="color: red;"></p>
                    </ol>
                    <ol class="listTaskGoal" rel="8" style="display: none;">
                    	<label class="fl index">08</label>
                        <@spring.formInput path="data.phase8.phaseName" attributes="class='inputStyle taskName' maxlength='255'"/>
                        <@spring.formInput path="data.phase8.percentMeasure" attributes="class='inputStyle taskPercent' rel='numeric' maxlength='3'"/>
                        <@spring.formInput path="data.phase8.deadLine" attributes="class='inputStyle taskDeadline datePickerInput' rel='#showDatePicker8'"/>
                        <@spring.formHiddenInput path="data.phase8.index"/>
                        <@spring.formHiddenInput path="data.phase8.id"/>
                        <a href="#" id="showDatePicker8" class="datePicker fl"></a>
                    </ol>
                    <ol class="taskError" rel="8" style="display: none">
                    	<p style="color: red;"></p>
                    </ol>
                    <ol class="listTaskGoal" rel="9" style="display: none;">
                    	<label class="fl index">09</label>
                        <@spring.formInput path="data.phase9.phaseName" attributes="class='inputStyle taskName' maxlength='255'"/>
                        <@spring.formInput path="data.phase9.percentMeasure" attributes="class='inputStyle taskPercent' rel='numeric' maxlength='3'"/>
                        <@spring.formInput path="data.phase9.deadLine" attributes="class='inputStyle taskDeadline datePickerInput' rel='#showDatePicker9'"/>
                        <@spring.formHiddenInput path="data.phase9.index"/>
                        <@spring.formHiddenInput path="data.phase9.id"/>
                        <a href="#" id="showDatePicker9" class="datePicker fl"></a>
                    </ol>
                    <ol class="taskError" rel="9" style="display: none">
                    	<p style="color: red;"></p>
                    </ol>
                    <ol class="listTaskGoal" rel="10" style="display: none;">
                    	<label class="fl index">10</label>
                        <@spring.formInput path="data.phase10.phaseName" attributes="class='inputStyle taskName' maxlength='255'"/>
                        <@spring.formInput path="data.phase10.percentMeasure" attributes="class='inputStyle taskPercent' rel='numeric' maxlength='3'"/>
                        <@spring.formInput path="data.phase10.deadLine" attributes="class='inputStyle taskDeadline datePickerInput' rel='#showDatePicker10'"/>
                        <@spring.formHiddenInput path="data.phase10.index"/>
                        <@spring.formHiddenInput path="data.phase10.id"/>
                        <a href="#" id="showDatePicker10" class="datePicker fl"></a>
                    </ol>
                    <ol class="taskError" rel="10" style="display: none">
                    	<p style="color: red;"></p>
                    </ol>
                    <ol class="totalPercent">
                    	Tổng số % đã sử dụng: <b>0%</b>
                    </ol>
                    <ol class="remainPercent">
                    	Tổng số % còn lại: <b>100%</b>
                    </ol>
                </li>
                
                <li>
                	<a href="javascript:submitForm();" class="btnSubmitTask">Tạo mục tiêu</a>
                </li>
    

            </ul>
            
        </div>
    </div>
    
    <div id="right">
		<@userCompleteness />		
		<@topGoals />
		<@userIntro />
        <@friendList username="${data.userInSession}" />
        <@friendHint />
	</div>
</div>